<template>
  <el-dialog :close-on-click-modal="false" title="修改宝贝信息" :visible.sync="visible" width="52.5%" :before-close="handleClose">
      <div class="shopModal" :style="{width: current === 2?'100%':''}">
        <div v-if="current === 1">
          <el-form ref="Form" :model="Form" status-icon>
            <el-form-item prop="goods_name" label="宝贝名称">
              <input v-model="Form.goods_name" placeholder="输入宝贝名称" />
            </el-form-item>
            <el-form-item prop="goods_price" label="宝贝价格" >
              <input v-model="Form.goods_price" placeholder="输入宝贝价格" />
            </el-form-item>
            <h1 class="attr">基本属性</h1>
            <el-form-item v-for="(item,index) in currentAttr" :key="index" :label="item.title" >
              <input v-model="Property[item.modals]" ref="property"/>
            </el-form-item>
            <el-form-item prop="des" label="宝贝描述">
              <textarea v-model="Form.goods_description"/>
            </el-form-item>
            <el-form-item prop="dess" label="宝贝更新日志">
              <textarea v-model="Form.goods_updateLog" />
            </el-form-item>
          </el-form>
          <div class="buttons">
            <el-button type="primary" @click="handleNext" :style="{width: '100px'}">下一步</el-button>
          </div>
        </div>
        <div v-else-if="current === 2" class="addPic">
          <div class="main">
            <el-form  status-icon>
              <div class="lastItem">
                <el-form-item prop="upFile" label="宝贝封面">
                  <el-upload
                    class="avatar-uploader" 
                    :action="handleGetAction('title')"
                    name="title"
                    :show-file-list="false" 
                    :on-success="handleFileSuccess" 
                    :before-upload="beforeUpload1"
                    :on-error="handleFileError"
                    accept=".jpg,.png"
                    >
                    <img v-if="titleImg.src" :src="titleImg.src" class="titleImg"/>
                    <i class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
                <el-form-item prop="upFile" label="宝贝照片">
                  <el-upload
                    class="avatar-uploader" 
                    :action="handleGetAction('content')"
                    name="content"
                    :show-file-list="false" 
                    :on-success="handleFileSuccess" 
                    :before-upload="beforeUpload2" 
                    :on-error="handleFileError"
                    multiple
                    accept=".jpg,.png"
                    list-type="picture"
                    :disabled="contentLoading"
                    >
                      <i v-if="contentLoading" class="avatar-uploader-icon2">
                        上传中...
                      </i>
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                  <div class="contentImgDiv">
                    <img v-for="(item,index) in contentImg" :src="item.src" :key="index" class="contentImg">
                  </div>
                </el-form-item>
                <el-form-item prop="upFile" label="上传文件">
                  <el-upload 
                    class="avatar-uploader"
                    name="file"
                    :action="handleGetAction('file')" 
                    :show-file-list="false" 
                    :on-success="handleFileSuccess" 
                    :before-upload="beforeUpload3" 
                    :on-error="handleFileError"
                    multiple
                    >
                    <i class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                  <div class="fileTextDiv">
                    <p v-for="(item,index) in fileText" :key="index" class="fileText">{{item}}</p>
                  </div>
                </el-form-item>
              </div>
            </el-form>
          </div>
          <div class="footer">
            <div class="buttons">
              <el-button type="primary" @click="handleSure">确 定</el-button>
              <el-button plain @click="handleQuit">取 消</el-button>
            </div>
          </div>
        </div>
      </div>
  </el-dialog>
</template>

<script>
import { mapActions, mapState, mapMutations } from 'vuex';
export default {
  name: '',
  props: {
    good: {
      type: Object
    },
    visible: {
      type: Boolean,
      default: false
    },
  },
  computed:{
    ...mapState({
      userInfo: state => state.user.userInfo
    }),
    types(){
      return this.good.type_name;
    },
    currentAttr () {
      let arr = [];
      Object.keys(this.GoodDetail).forEach(key => {
        if (key === this.types) {
          arr = this.GoodDetail[key];
        }
      });
      return arr;
    },
  },
  data () {
    return {
      current: 1,
      Form: {
            goods_name: '', //名称
            goods_price: '', //价格
            goods_description: '', //描述,
            goods_updateLog: '', //更新
            goods_id: null,
            propertyValueItemReqVOList: [],
      },
      Property: {
            template_version: '',
            template_type: '',
            template_lead: '',
            template_display: '',
            component_version: '',
            component_type: '',
            component_lead: '',
            component_display: '',
            pictrue_mode: '',
            pictrue_ec: '',
            pictrue_size: '',
            pictrue_format: '',
            icon_mode: '',
            icon_type: '',
            icon_number: '',
            icon_format: '',
            sdk_type: '',
            sdk_drive: '',
            sdk_size: '',
            sdk_version: ''
      },
      GoodDetail: {
        '模板': [
          {
            title: '版本',
            property_id: 1,
            modals: 'template_version'
          },
          {
            title: '类型',
            property_id: 2,
            modals: 'template_type'
          },
          {
            title: '引导',
            property_id: 3,
            modals: 'template_lead'
          },
          {
            title: '布局',
            property_id: 4,
            modals: 'template_display'
          }
        ],
        '组件': [
          {
            title: '版本',
            property_id: 5,
            modals: 'component_version'
          },
          {
            title: '类型',
            property_id: 6,
            modals: 'component_type'
          },
          {
            title: '引导',
            property_id: 7,
            modals: 'component_lead'
          },
          {
            title: '布局',
            property_id: 8,
            modals: 'component_display'
          }
        ],
        '图片': [
          {
            title: '模式',
            property_id: 9,
            modals: 'pictrue_mode'
          },
          {
            title: '尺寸',
            property_id: 10,
            modals: 'pictrue_ec'
          },
          {
            title: '大小',
            property_id: 11,
            modals: 'pictrue_size'
          },
          {
            title: '格式',
            property_id: 12,
            modals: 'pictrue_format'
          },
        ],
        '图标': [
          {
            title: '模式',
            property_id: 13,
            modals: 'icon_mode'
          },
          {
            title: '类型',
            property_id: 14,
            modals: 'icon_type'
          },
          {
            title: '数量',
            property_id: 15,
            modals: 'icon_number'
          },
          {
            title: '格式',
            property_id: 16,
            modals: 'icon_format'
          },
        ],
        'sdk': [
          {
            title: '类型',
            property_id: 17,
            modals: 'sdk_type'
          },
          {
            title: '设备',
            property_id: 18,
            modals: 'sdk_drive'
          },
          {
            title: '大小',
            property_id: 19,
            modals: 'sdk_size'
          },
          {
            title: '版本',
            property_id: 20,
            modals: 'sdk_version'
          },
        ],
      },
      titleImg: {
        src: '',
        name: ''
      },
      contentImg: [],
      fileText: [],
      contentLoading: false
    }
  },
  methods: {
    ...mapActions(['fetchUpdateGoodsInfo','fetchUpdateGoods','fetchGoodsDetail']),
    handleClose () {
      this.current = 1;
      this.$emit('close');
    },
    handleChange({ type, current }){
      switch(type){
        case '模板':
          this.template_current = current;
          break;
        case '组件':
          this.component_current = current;
          break;
        case '图片':
          this.picture_current = current;
          break;
        case '图标':
          this.icon_current = current;
          break;
        case 'sdk':
          this.sdk_current = current;
          break;
      }
    },
    handleNext(){
      this.current = 2;
      this.fetchUpdateGoods(this.Form);
    },
    handleFromData(paylaod){
      const { updateInfoFromPropertyList, updateInfoFromGoodsList, goods2file, goods2content, goods2title } = paylaod;
                
      this.Form.goods_name = updateInfoFromGoodsList[0].goods_name;
      this.Form.goods_price = updateInfoFromGoodsList[0].goods_price;
      this.Form.goods_description = updateInfoFromGoodsList[0].goods_description;
      this.Form.goods_updateLog = updateInfoFromGoodsList[0].goods_updateLog;
      this.Form.goods_id = this.$route.query.goods_id,

      this.titleImg.src = goods2title;
      this.contentImg.push({ src: goods2content, name: '' });
      this.fileText.push(goods2file);

      switch(updateInfoFromPropertyList[0].property_id){
          case 1:
           this.Property.template_version = updateInfoFromPropertyList[0].propertyvalue_name;
           this.Property.template_type = updateInfoFromPropertyList[1].propertyvalue_name;
           this.Property.template_lead = updateInfoFromPropertyList[2].propertyvalue_name;
           this.Property.template_display = updateInfoFromPropertyList[3].propertyvalue_name;
           for (let index = 1,j = 0; index <= 4 ; index++,j++) {
             this.Form.propertyValueItemReqVOList.push({
               property_id: index,
               propertyValue_name: updateInfoFromPropertyList[j].propertyvalue_name
             });
           }
            return ;
          case 5:
           this.Property.component_version = updateInfoFromPropertyList[0].propertyvalue_name;
           this.Property.component_type = updateInfoFromPropertyList[1].propertyvalue_name;
           this.Property.component_lead = updateInfoFromPropertyList[2].propertyvalue_name;
           this.Property.component_display = updateInfoFromPropertyList[3].propertyvalue_name;
           for (let index = 5,j = 0; index <= 8 ; index++,j++) {
             this.Form.propertyValueItemReqVOList.push({
               property_id: index,
               propertyValue_name: updateInfoFromPropertyList[j].propertyvalue_name
             });
           }
            return ;
          case 9:
           this.Property.pictrue_mode = updateInfoFromPropertyList[0].propertyvalue_name;
           this.Property.pictrue_ec = updateInfoFromPropertyList[1].propertyvalue_name;
           this.Property.pictrue_size = updateInfoFromPropertyList[2].propertyvalue_name;
           this.Property.pictrue_format = updateInfoFromPropertyList[3].propertyvalue_name;
           for (let index = 9,j = 0; index <= 12 ; index++,j++) {
             this.Form.propertyValueItemReqVOList.push({
               property_id: index,
               propertyValue_name: updateInfoFromPropertyList[j].propertyvalue_name
             });
           }
              return ;
          case 13:
           this.Property.icon_mode = updateInfoFromPropertyList[0].propertyvalue_name;
           this.Property.icon_type = updateInfoFromPropertyList[1].propertyvalue_name;
           this.Property.icon_number = updateInfoFromPropertyList[2].propertyvalue_name;
           this.Property.icon_format = updateInfoFromPropertyList[3].propertyvalue_name;
           for (let index = 13,j = 0; index <= 16 ; index++,j++) {
             this.Form.propertyValueItemReqVOList.push({
               property_id: index,
               propertyValue_name: updateInfoFromPropertyList[j].propertyvalue_name
             });
           }
            return ;
          case 17:
           this.Property.sdk_type = updateInfoFromPropertyList[0].propertyvalue_name;
           this.Property.sdk_drive = updateInfoFromPropertyList[1].propertyvalue_name;
           this.Property.sdk_size = updateInfoFromPropertyList[2].propertyvalue_name;
           this.Property.sdk_version = updateInfoFromPropertyList[3].propertyvalue_name;
           for (let index = 17,j = 0; index <= 20 ; index++,j++) {
             this.Form.propertyValueItemReqVOList.push({
               property_id: index,
               propertyValue_name: updateInfoFromPropertyList[j].propertyvalue_name
             });
           }
            return ;
      }
    },
    //获取上传文件信息
    handleGetAction(type){
      switch(type){
        case 'title':
          return `/api/updateGoodsTitle?goods_id=${this.$route.query.goods_id}`;
        case 'content':
          return `/api/updateGoodsContent?goods_id=${this.$route.query.goods_id}`;
        case 'file':
          return `/api/updateGoodsFile?goods_id=${this.$route.query.goods_id}`;
      }
    },
    handleFileSuccess(){
      this.$message({
        type: 'success',
        message: '上传成功',
        showClose: true
      });
      this.contentLoading = false;
    },
    handleFileError(){
      this.$message({
        type: 'error',
        message: '上传失败,请重新上传。',
        showClose: true
      });
    },
    beforeUpload1(FILE){
      this.titleImg = Object.assign({},{src: '',name: ''});
      const reader = new FileReader();
      reader.readAsDataURL(FILE);
      reader.onload = e => {
        this.titleImg.src = e.target.result;
        this.titleImg.name = FILE.name;
      };
    },
    beforeUpload2(FILE){
      this.contentImg.splice(0,this.contentImg.length);
      const reader = new FileReader();
      reader.readAsDataURL(FILE);
      reader.onload = e => {
        this.contentImg.push({
          src: e.target.result,
          name: FILE.name
        });
      };
      this.contentLoading = true;
    },
    beforeUpload3(FILE){
       this.fileText.splice(0,this.fileText.length);
       this.fileText = [];
       this.fileText.push(FILE.name);
    },
    handleQuit(){
      this.handleClose();
    },
    handleSure(){
      this.clearFiles();
      this.$message({
        type: 'success',
        message: '修改完成',
        showClose: true
      });
      this.handleClose();
      this.fetchGoodsDetail({ user_id: this.userInfo.user_id, goods_id: this.$route.query.goods_id});
    },
    clearFiles(){
      this.titleImg = {
        src: '',
        name: ''
      };
      this.contentImg.splice(0,this.contentImg.length);
      this.fileText.splice(0,this.fileText.length);
    }
  },
  watch: {
    good: {
      handler(newV){
        if(newV.sellerId === this.userInfo.shop_id){
          this.fetchUpdateGoodsInfo({ goods_id: this.good.goods_id })
            .then(res=> {
              const { code, extend: { result: { updateGoodsInfo } } } = res;
              if(code === 200){
                this.handleFromData(updateGoodsInfo);

              }
            })
        }
      },
      deep: true
    },
    Property: {
      handler(){
        if(this.$refs.property){
          this.Form.propertyValueItemReqVOList.forEach((item,index) => {
            item.propertyValue_name = this.$refs.property[index].value;
          });
        }
      },
      deep: true
    }
  }
}
</script>
<style lang='scss' scoped src="./index.scss"/>
<style lang="scss">
  .avatar-uploader .el-upload {
    border: 1px dashed #888;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: $theme-color;
    .el-icon-plus:before {
      color: $theme-color;
    }
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar-uploader-icon2 {
    padding: 0 25px;
    font-size: 18px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 120px;
    height: 120px;
    display: block;  
  }
</style>